html {
	font-size: 18px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	margin: 0px;
	padding: 0px;
	overflow-anchor: none;		/* to keep gorram page from jumping when updating */
}

body {
	font-size: 1rem;
	line-height: 1.4;
	max-width: 100dvw;
	width: 100dvw;
		margin: 0px;
		padding: 0px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


/* border to find problems with layout, including pseudo-elements 

*, *::before, *::after {
  outline: 1px solid red;
}
*/





/* colors to find problems with layout, this only works 9 layers deep 

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }  

*/


:root {	
/* not actually using these vars, but this is the calc for the relative box
--scale1: calc(1920px - 100vw);
--scale2: calc(var(--scale1) / var(--arch-viewport-range));
--scale3: calc(var(--scale2) * 60vw);
--scale4: calc(var(--scale3) + 80vw);
*/




/*for this mod (rotrdk) : */


/* scaling for bar vine */
	--scale-factor: 1.5;
  --base-width: clamp(200px, 14.063vw, 270px);
  --base-height: calc(var(--base-width) * 0.4667); /*this is the aspect ratio, height divided by width) */


}



/*THE WIDTH SHRINKY CALC 
width: clamp(80%, calc(calc(((((1920px - 100lvw) / 1460) * -10) + 60lvw))), 98lvw);

OR (better)

width: clamp(80%, calc(75.51% + 103px), 90%);
*/

/* ARCHIVES WIDTH SHRINKY CALC
 width: clamp(70lvw, calc(55.31vw + 206px), 90lvw); */

/* THIS IS THE FONT BG IMG SHRINKY CALK  (h2)
background-size: clamp(25%, calc(50% - ((100lvw - 23.44lvw) * 25 / 76.56)), 50%) auto;
*/

  	/* 	THIS IS THE FONT BG IMG SHRINKY CALC EM VERSION  (h1)
background-size: clamp(10rem, calc(4.167vw * 3), 10rem) auto;
*/







/* background-most image or color */
	.body-bg {
		width: 100%;
        max-width: 100%;
		background-color: #d2cdc0;
		background-image: url("../rotrdk images/bg dryparch.gif");
		background-size: auto;
		background-repeat: repeat;
		font-family: 'Times New Roman',serif;
        color: #663300;
		border: 0px solid yellow;
		margin: 0px;
		padding: 0px;
		overflow: visible;
	}



/* constrain all following elements/content to this box size */
	.relative-box {		
		display: flex;
		justify-content: center;
  		padding: 0px;
		margin: 10px auto 0px auto;
		width: 90%;
		max-width: 100%;
		min-width: 200px;
		border: 0px solid green;
	}


/* outer decoration box 5px and main content bg */
	.bg-main {
		width: 100%;
		background-image: url("../rotrdk images/bg med parch.jpg");
		background-repeat: repeat;
		padding: 2px;
		display: flex;
		max-width: 100%;
		justify-content: center;
		border: 5px solid #663300;
	}

/* inner decoration box 1px */
	.bg-deco {
		width: 100%;
		padding: 0px 0px 2.604dvw 0px;
		display: flex;
		max-width: 100%;
		justify-content: center;
		border: 1px solid #663300;
	}




/* content layout flexbox, this lets items in each div appear below the previous */

	.flexbox-container-stack {
  		display: flex;
  		flex-direction: column;
  		align-items:center;
  		width:100%;
  		max-width:100%;
		border: 0px solid red;
	}


/* content layout flexbox 2, this allows each div item to appear in a row */
	.flexbox-container-row {
		flex: 1;
		width: 100%;
	  	display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		border: 0px solid blue;
	}



	.flexrow-gap {
		flex: 1;
		width: 100%;
	  	display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
  		padding: 0px 100px;
		column-gap: 10px;
		border: 0px solid lime;
	}

	/* stop "a name=" from behaving like links and changing color on hover */
 a[name],
 a[name]:hover {
  color: inherit;
  text-decoration: none;
}


 /* unvisited link */
a:link {
	z-index: 10;
	color: blue;
    transition: color 0.2s ease;
}

 a:not(.footer a) {
  position: relative;
  text-decoration: none;
}

.footer a {
	text-decoration: none;
}

#weblog a:hover h2,
#weblog a:visited:hover h2 {
  color: #A3240B;
}
#weblog a:visited h2 {
  color: #4A2E28;
}


/* visited link */
a:visited {
  color: purple;
}

/* mouse over link */
a:hover {
  color: #ff5733;
}

/* selected link */
a:active {
  color: white;
} 


	div {
		border: 0px solid orange;
	}

.spacer {
	min-height: 1.25em;
	border: 0px solid green;
}

.negspacer {
	margin: -50px auto 0px auto;
	border: 0px solid green;
}

.spacercol {
	margin: auto 1.25em;
	min-width: 1.25em;
	border: 0px solid green;
	}



.negspacerrow {
	margin: -2.25em auto;
}



.wide {
	width: 100%;
}

	p {
		text-align: left;
		text-indent: 3em;
	}



	li {
		text-align: left;
		padding: 0.25em;
		box-sizing: border-box;
		}


.li-pad {
		padding: 1em;
		li + li {
			margin-top: 0.75em;
		}
	}


	ul.li-pad li:nth-child(odd), 
	ul.li-pad2 li:nth-child(even), 
	ol.li-pad li:nth-child(odd),
	ul.NPClist li:nth-child(odd) {
		background-color: rgba(255,255,255, 0.3);
		max-width: 100%;
		background-clip: border-box;
		padding: 1em;
		}
		
	ul.li-pad li:nth-child(even), 
	ul.li-pad2 li:nth-child(odd), 
	ol.li-pad li:nth-child(even),
	ul.NPClist li:nth-child(even) {
		padding: 1em;
		}


div.li-pad > div:nth-child(odd) {
	background-color: rgba(255,255,255, 0.3);
	background-clip: border-box;
	padding: 1em;
}
div.li-pad > div:nth-child(even) {
	padding: 1em;
}


	ul.NPClist li:nth-child(odd),
	ul.NPClist li:nth-child(even) {
		padding: 0.2em;
		}













	.liArch {
		li {
			font-size: 1.25em;
			font-weight: bold;
			font-family: 'Trajan Pro', 'Times', Serif;
		}
	}



.center {
	justify-content: center;
	align-content: center;
	align-items: center;
	text-align: center;
}



















	#center h2 {
				text-align: center;
			}

/* this is the clearfix hack renamed - just remove it if there are problems, it won't affect the other bigHeader effects */
.bigHeader::after {
  content: "";
  clear: both;
  display: table;
}

	.bigHeader h2 {
		display: flex;
		margin: 10px 30px 35px 15px;
		padding: 15px clamp(5px, 2.604vw, 50px) 5px clamp(5px, 2.604vw, 50px);
	}


	.bigHeader p {
		padding: 5px clamp(5px, 2.604vw, 50px) 5px clamp(5px, 2.604vw, 50px);
	}
	
	.pad {
		padding: 25px;
	}


	.bar {
		position: relative;
		display: flex;
        max-width: 100%;
		min-height: 50px;
		max-height: 100px;
        margin: 1em auto;
		width: 100%;
		height: clamp(50px, 5.208vw, 100px);
		background-image: url("../rotrdk images/buts/bar thassilonian runes.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		overflow: hidden;
		border: 0px solid yellow;
	}

/* too lazy to actually remove this from the cast page, but ignore it, it used to be an id but it borks the size of the bar */
.barheight {
	height: 100%;
}



	.menu {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
		width: 100%;
		border: 0px solid purple;
	}

	.menucol {
		display: flex;
		flex-direction: column;
		align-content: flex-start;
		position: relative;
		width: 45%;
		min-width: 45%;
		padding: 0px 1em;
		border: 0px solid yellow;
	}



			
			
			
			
	.LFloatedHighlight, .RFloatedHighlight {
		clear: both;
		display: flex;
		flex-direction: column;
		position: relative;
		width: 26.042dvw;
		max-width: 80%;
		padding: 25px;
		margin: 1.25em;
		background-color: rgba(255, 255, 255, 25%);	
		ul {
			margin: 0px 0px 0px 0px;
		}
		li {
			padding: 5px;
		}
		border: 0px solid fuchsia;	
	}

	.LFloatedHighlight {
		float: left;
	}

	.RFloatedHighlight {
		float: right;
	}



	.gap {
		display: flex;
		column-gap: 5px;
		flex-wrap: nowrap;
		border: 0px solid green;
	}


	.rowwrap {
		display: flex;
		flex-direction: row;
		position: relative;
		flex-wrap: wrap;
	}


.textAlignBottomDiv {
	display: flex;
	flex-direction: row;
	gap: 2em;
	vertical-align: bottom;
	border: 0px solid purple;
}

.textAlignBottomSpan {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
	text-align: left;
	border: 0px solid lime;
}

.textAlignTop {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-start;
	text-align: left;
}

.toplist {
	background-color: rgba(218, 165, 32, 0.3);
	width: 100%;
	h2 {
		color: black;
	}
}

.dead {
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFEFCC;
	text-shadow: 0px 0px 10px #DB3B3B;
}


/* navigation, iframes and footer */


.navbar {
	width: 100%;
	border: 0px solid green;
}



	#show-iframe {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
		resize: none; 
		margin: 0px;
		position: relative;
		overflow: hidden;
		border:0px solid green;
	}


	#frame-resize {
		width: 100%;
		height: 90px;
		border: 0px;
	}


	.responsive-iframe {
		display: flex;
		flex-grow: 1;
		justify-content: center;
		object-fit:contain;
		width: 100%;
		resize: none; 
		margin: 0px;
		position: relative;
		overflow: hidden;
	}


	.nav-flex {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
 		justify-content: center;
		align-items: center;
		border: 0px solid lime;
	}


	.nav, .navB {
		max-width: 100%;
		height: auto;
		display: flex;
 		justify-content: center;
		align-items: center;
		border: 0px solid purple;
	}


	.navImg {
		display: flex;
		width: clamp(150px, 70.313vw, 250px);
		max-width: 100%;
		height: auto;
 		justify-content: center;
		border: 0px solid green;
	}
	
	.navImg img {
		display: block;
		width: clamp(250px, 13.021vw, 13.021vw);
		max-width: 100%;
		object-fit: contain;
		height: auto;
		margin: 0px;
	}
	
	
	
	
.nav-arch {
		max-width: 100%;
		max-height: 110px;
		padding: 5px;
		display: flex;
 		justify-content: center;
		align-items: center;
}






.nav-arch[disabled] {
	opacity: 0.5;
	pointer-events: none;
	/* Disable clicks */
}














.header {
		height: auto;
		padding: 0px;
		margin: 0px auto 0px auto;
 		justify-content: center;
		object-fit:contain;
  		margin: 0px 0px 0px 0px;
		border: 2px solid snow;
	}



/* 	.nav flex {
		height: auto;
		padding: 0px;
		margin: 0px auto 0px auto;
 		justify-content: center;
		object-fit:contain;
  		margin: 0px 0px 0px 0px;
		border: 0px solid green;
	}
*/
	.body-footer {
	    overflow: hidden; /* Hide scrollbars */
		display: flex;
        max-width: 100%;
		margin: 0px;
		justify-content: center;
		text-align: center;
		font-family: 'Trajan Pro','Times New Roman',serif;
	}

	.footer {
	  overflow: hidden; /* Hide scrollbars */
	  display: flex;
	  margin: 1.25em auto;
	  width: 50%;
	  min-width: 2.5em;
	  height: 25px;
	  text-align: center;
	  justify-content: center;
	  font-family: "Trajan Pro";
	  font-size: 0.8em;
	}
	
	.footerarch {
	  overflow: hidden; /* Hide scrollbars */
	  display: flex;
	  margin: 1.25em 0px;
	  width: 100%;
	  min-width: 2.5em;
	  height: 25px;
	  text-align: center;
	  justify-content: center;
	  font-family: "Trajan Pro";
	  font-size: 0.8em;
	}

	#frame {
		border: 0px;
	}

/* slightly larger than frame-resize to accomodate the sihedron not getting its bottom cut off -_-; */

#frame-resize-arch {
		width: 100%;
		height: 110px;
		border: 0px;
	}





.navArchUp {
		display: flex;
		max-width: 110px;
		height: auto;
 		justify-content: center;
		align-items: center;
	    overflow: hidden; /* Hide scrollbars */
		border: 0px solid yellow;
	}



/* image-related divs  */


/* to size the header for each page */
	img.splashHeader {
		margin: 1em auto 0.5px auto;
		justify-content: center;
		width: clamp(200px, 37.604vw, 100%);
		max-width: 722px;
		border: 0px solid red;
	}


	img.sihedronL, img.sihedronR {
		display: flex;
		width: clamp(80px, 15.677vw, 100%);
		max-width: 100%;
		border: 0px solid green;
	}
	
	.sihedronL {
		justify-content: flex-end;
		margin-left: auto;
	}
	.sihedronR {
		justify-content: flex-start;
		margin-right: auto;
	}
	
	


	.RFloatedImg {
		float: right;
		display: flex;
		position: relative;
		width: 100%;
		max-width: 550px;
		padding: 1em;
	}


	.LFloatedImg {
		float: left;
		display: flex;
		position: relative;
		width: 100%;
		max-width: 550px;
		padding: 1em;
	}
	

	.centeredImg {
		display: flex;
		position: relative;
		width: auto;
		max-width: 100%;
		min-width: 200px;
		margin: 1em auto;
		align-items: center;
	}


	.wideCenteredImg {
		display: flex;
		position: relative;
		width: auto;
		max-width: 100%;
		min-width: 200px;
		margin: 1em auto;
		align-items: center;
		text-align: center;
	}


	.castgallery {
		position: relative;
		width: calc(88.385vw / 4.5); /* calc for number of PCs on one line +0.5 */
		height: calc((88.385vw / 4.5) * 1.25);
		min-width: 250px;
		min-height: 300px;
		max-width: 250px;
		max-height: 300px;
		overflow: hidden;
	}

	.castgallery img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		padding: 0px;
		margin: 0px;
		transition: filter 1s ease;
		filter: brightness(1);
	}

	.castgallery img:hover {
		filter: brightness(1.3);
	}


	.biopic {
		float: right;
		display: block;
		position: relative;
		width: clamp(200px, 20.588vw, 100%);
		max-width: 350px;
		margin: 1em 0px 1em 1em;
		border: 0px solid white;
	}
	
	.archpicNarrow {
		float: left;
		display: block;
		position: relative;
		width: 100%;
		max-width: 375px;
		padding: 1.25em;
	}
	
	

/*This targets only PNG images within .HPs*/
.HPs img[src$=".png"] {
  border: 0px solid yellow;
  width: clamp(75px, 5.729vw, 110px);
  max-width: 110px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}


/* HODS-specific????? for that bigass sword and hammer that are too long compared to their width, so they bork the items groups. Better keep this one. (put the class on the specific html img) */
.shrink {
	height: clamp(125px, calc(12.113vw + 39.435px), 272px);
	align-self: flex-end;
}


/*This targets only JPG images within .items*/
.items img[src$=".jpg"]:not(.shrink) {
  border: 0px solid green;
  width: clamp(75px, 10.417vw, 200px);
  max-width: 200px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: center bottom;
  	align-self: flex-end;
}
/*This targets only PNG images within .items*/
.items img[src$=".png"] {
  border: 0px solid blue;
  width: clamp(75px, 10.417vw, 200px);
  max-width: 200px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: center bottom;
  	align-self: flex-end;
}
/*This targets only GIF images within .items*/
.items img[src$=".gif"] {
  border: 0px solid red;
  width:  clamp(75px, 4.167vw, 80px);
  max-width: 80px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: center bottom;
  	align-self: flex-end;
}

.items {
	display: flex;
	border: 0px solid white;
}




.spentEnc {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0px;
	padding: 0px;
	gap: 5px;
}


.spentEnc img {
	display: block;			/* to avoid the gorram tiny space under it due to baseline leaving room for descenders */
	position: relative;
	filter: sepia(70%);
	opacity: 1;
	margin: 0px;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 7px;
}


.spentEncOverlay {
	position: absolute;
  white-space: pre;
  text-align: center;
  color: var(--overlay-color, black);
  font-weight: var(--overlay-weight, bold);
  font-size: var(--overlay-size, 1em);
  line-height: var(--overlay-line-height, 1);
  text-shadow: var(--overlay-text-shadow, 
    0px 0px 4px rgba(255, 255, 255, 1),
    0px 0px 2px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 0, 0.8),
    0 0 10px rgba(255, 198, 31, 0.4),
    0 0 10px rgba(255, 198, 31, 0.4),
    0 0 15px rgba(255, 198, 31, 0.5));
	z-index: 6;
  }



/*This targets only PNG images within .achieve*/
.achieve img[src$=".png"] {
  width: clamp(100%, 13.021vw, 100%);
  max-width: 250px;
  object-fit: contain;
  	border: 0px solid lime;
}


img.sihedronArch {
		display: flex;
  		justify-content: center;
		width: 100%;
		max-width: 100%;
	}

figure {
	display: flex;
	margin: auto;  
	justify-content: center;
}

figcaption {
	display: flex;
	margin: auto;
  	background-color: rgba(255, 255, 255, 50%);
  	font-style: italic;
	font-size: .75em;
  	padding: 15px 10% 10px 10%;
	width: 100%;  
	justify-content: center;
}

	.figimg {
		width: 100%;
		max-width: 500px;
	}

img.archHeader {
	display: flex;
	width: 100%;
	margin: 15px 0px;
}



























/* fonts  */

	@font-face {
		font-family: 'Trajan Pro' ;
		src: local('Trajan Pro.ttf'), format('truetype');
		src: url('../rotrdk misc/rotrdk fonts/Trajan Pro.ttf'), format('truetype');
		font-weight: normal;
        font-style: normal;
	}
		
		
	@font-face {
		font-family: 'Ghastly Panic';
		src: local('Ghastly Panic.ttf'), format('truetype');
		src: url('../rotrdk misc/rotrdk fonts/Ghastly Panic.ttf'), format('truetype');
		font-weight: normal;
        font-style: normal;
	}
		
		
	@font-face {
		font-family: 'Goblin Creek Italic';
		src: local('goblincreekitalic.ttf'), format('truetype');
		src: url('../rotrdk misc/rotrdk fonts/goblincreekitalic.ttf'), format('truetype');
		font-weight: 200;
        font-style: normal;
	}






	h1 {
		 font-size: clamp(2.6em, 2.813vw, 3em);
		 font-family: 'Trajan Pro', 'Times New Roman', Serif;
        }


    h2 {
		font-size: clamp(1.5em, 2.063vw, 2.2em);
		font-family: 'Trajan Pro', 'Times New Roman', Serif;
		margin: 0px 5px 10px 5px;
        }


	h3 {
		 font-size: 1.05em;
		 font-family: 'Trajan Pro', 'Times New Roman', Serif;
        }





	.achieve h1 {
		text-align: center;
	}

	.bio h1 {
		text-align: center;
        }

#weblog .menu .menucol h2 {
	margin-top: 0em;
	margin-bottom: 0em;
	line-height: 1;
}

#weblog .arch-ch1 h2,
#weblog .arch-ch2 h2 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	line-height: 1;
}

#weblog-mod1 .arch-ch1 h2,
#weblog-mod1 .arch-ch2 h2 {
	margin-top: 1em;
	margin-bottom: 0.75em;
	line-height: 1;
}


























/* individual page classes  */

/* cast  */

	.bio {
		display: flex;
		flex-direction: column;
		position: relative;
		width: clamp(80%, calc(75.51% + 103px), 90%);
		margin: 1.25em 0px 1em 0px;
		border: 0px solid yellow;
	}





	.caststats {
		display: block;
		flex-direction: column;
		position: relative;
		float: left;
		background-color: rgba(255, 255, 255, 25%);
		width: 100%;
		max-width: 650px;
		margin: 1em 1.5em 1.25em 0px;
		padding: 25px;
		text-align: left;
		ul {
			margin: 0em;
		}
		li {
			list-style-position: outside;
			padding: 2px 0px 2px 10px;
			margin-bottom: 1em;
		}
		p {
			text-indent: 1.5em;
		}
	}
	
.caststats ul,
.caststats ol {
	margin-bottom: 2em;
}
	
.caststats:last-of-type {
	float: none;
	display: flex;
	margin: 1em auto;
	}

.caststats ul:last-of-type {
	margin-bottom: 0em;
	li {
		margin-bottom: 0em;
	}
}
.caststats ul p:last-of-type {
	margin-bottom: 0em;
}
.caststats ol {
	padding-left: 0.8em;
}

.caststats ol:last-of-type {
	margin-bottom: 0em;
}

.caststats:first-of-type {
	margin-right: 2em;
	margin-top: 0em;
		p {
			text-indent: 0em;
		}
}



.caststats:last-of-type {
	width: fit-content;
	max-width: fit-content;
	h3 {
		margin-top: 0em;
	}
}


	.achieve {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: auto;
		max-width: 100%;
		margin: auto;
		justify-content: center;
		border: 0px solid fuchsia; 
		}

	.NPCExtrasContainer {
		float: right;
		display: flex;
		flex-direction: column;
		position: relative;
		width: auto;
		max-width: 50%;
		object-fit: contain;
		margin: 25px 25px 25px 0px;
		padding: 25px;
		background-color: rgba(255, 255, 255, 50%);
		font-size: 20px;	
		border: 0px solid pink;	
		b {
			margin: 20px 0px 0px 10px;	
		}
		ul {
			margin: 0px 0px 0px 0px;
		}
		li {
			list-style-position: outside;
			padding: 5px;
		}
	}

	.NPCgallery {
		float: right;
		display: flex;
		position: relative;
		object-fit: contain;
		width: 100%;
		max-width: 350px;
		min-width: 200px;
		padding: 25px 10px 25px 25px;
		border: 0px solid yellow;
	}

	.NPCgalleryExtras {
		float: left;
		display: flex;
		position: relative;
		width: 100%;
		max-width: 300px;
		min-width: 200px;
		padding: 15px 15px 10px 15px;
		  border: 0px solid yellow;
	}

	.HPs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: auto;
		max-width: 100%;
    		height: auto;
		max-height: 100%;
		margin: 0px;
		border: 0px solid blue; 
		}
		
.items {
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  position: relative;
	width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  gap: 0.25em 0.25em;
	border: 0px solid blue;
}		
		


/* archives  */

.barArch:first-of-type {
	margin: 0.5em auto;
}




.barArch {
		position: relative;
		display: flex;
		justify-content: center;
        max-width: 100%;
		min-height: 80px;
        margin: 3.5em auto 0.5em auto;
		width: 100%;
		height: 80px;
		background-image: url("../rotrdk images/buts/bar thassilonian runes.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		overflow: hidden;
		border: 0px solid yellow;

	}


	.archives {
		align-items: center;
		width: 70%;
		h2 { text-align: center; 
			margin: auto auto 2.604vw auto;
			}
		h3 { 
			font-style: italic; 
		}
		border: 0px solid red;
	}


.archBold {
		align-items: left;
		width: 100%;
		border: 0px solid yellow;
	}

.arch-ch1 {
	justify-content: center;
	border: 0px solid lime;
	}



.arch-ch1	h1 {
		font-family: "Goblin Creek Italic";
		font-style: normal;
		font-weight: 100;
		color: #420505;
		font-size: clamp(2.6em, 7vw, 7vw);
		text-align: center;
		margin-top: -0.013vw;
		margin-bottom: -0.01em;
		line-height: 0.7;
	}
	
.arch-ch1	h2 {
		font-family: "Goblin Creek Italic";
		font-style: normal;
		font-weight: 100;
		color: #420505;
		font-size: clamp(2.4em, 4vw, 4vw);
		text-align: center;
		line-height: 0.7;
	}

.arch-ch2 h1 {
		text-align: center;
		font-family: "Ghastly Panic";
		font-size: clamp(3em, 7vw, 6em);
		font-weight: 200;
		color: #420505;
	}

.arch-ch2 h2 {
		text-align: center;
		font-family: "Ghastly Panic";
		font-size: clamp(2.5em, 5vw, 4em);
		font-weight: 200;
		color: #420505;
	}


	.menutextDiv {
		padding: 5px 0px;
	}


.archheader {
	    overflow: hidden;
		display: flex;
	  margin-left: 0px;
	  margin-right: 0px;
	  margin-bottom: 0px;
	  width: 100%;
	  height: 300px;
	  text-align: center;
	  justify-content: center;
	}

/* blockquote for songs and such */
   .BQ {
		margin: 0.5em 5em;
		font-style: italic;
		background-color: rgba(255, 255, 255, 0.3);
		background-clip: border-box;
		padding: 1em;
		p {
			text-indent: 0em;
		}
	}
	


/* tables  */

	table {
		display: table;
		vertical-align: top;
		align-items: start;
		width: 100%;
  		border-collapse: collapse;
		border-color: #663300;
		padding: 0px;
	}

	.klugetable {
		display: relative;
		width: 100%;
		border-color: #663300;
		border: 0px solid black;
	}
	
	.tableAlternating {
		align-items: start;
		margin: 0px;
	}






	.tableAlternating tr:nth-child(odd) {
				background-color: rgba(255,255,255, 0.3);
			}
			
			
	.tableAlternatingCol {
		margin: 0px;
			td:nth-child(odd) {
				background-color: rgba(255,255,255, 0.3);
			}
			td {
				padding: clamp(0.521vw, 3.125vw, 10px);
				border: 2px solid;
			}
	}




.td1 {
		font-style: italic;
		text-align: center;
		width: 125px;
		padding: 15px;
		vertical-align: top;
	}


	.td2 {
		text-align: left;
		font-style: italic;
		width: auto;
		padding: 15px 20px 15px 15px;
		p {
			text-indent: 0em;
		}
	}
		
		
		.alignTable {
		padding: 0px 10.417vw 0px 0px;
		margin: auto;
		max-width: 50%;
		td {
			text-align: center;
			font-family: 'Trajan Pro';
			font-size: clamp(1.2em, 1.823vw, 35px);
			padding: 5px;	
		}
	}


	.tdShort {
		width: 150px;
		height: 100px;
		padding: 20px;
		font-family: 'Trajan Pro';
		font-size: 30px;
		font-weight: bold;
		vertical-align: top;
	}

	.tdLong {
		width: 100%;
		vertical-align: top;
		padding: 27px 50px 27px 30px;
	}




/* test faketable for divs with alternating lighter color */

	.faketable {
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;
		width: 95%;
		border: 0px solid purple;
	}


		

	.fakerow {
		display: flex;
		position: relative;
		align-items: start;
		width: 100%;
		border: 0px solid orange;
		}


#setting .monthwidth {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0px auto;
		padding: 0px auto;
		width: 100%;
		gap: 0.5em;
		border: 0px solid snow;
	}


#setting .monthborder {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
		margin: 0px auto;
		padding: 0px;
		gap: 0px;
		border: 0px solid lime;
		}


#setting .fakerow {
		display: flex;
		flex-direction: row;
		justify-content: left;
		margin: 0px;
		padding: 0px;
		width: auto;
		border: 2px solid #663300;
		}
		
#setting .faketd {
		display: flex;
		flex-direction: row;
		justify-content: left;
		margin: 0px;
		padding: 7px;
		width: clamp(100px, 7.813vw, 100px);	
}
		
		
	
	

	
	:nth-child(odd of div.fakerow) {
		background-color: rgba(255,255,255, 0.3);
		}

	
	.fakerow div.resizeNPCimgs {
		width: 100%;
		max-width: 350px;
	}


	.alt-td {
		vertical-align: top;
		h2 {
			margin: 10px;
		}
	}
	
	
	#weekdays td {
		border-bottom:  2px solid #663300;
	}
	
	
	#abilities {
		width:clamp(100%, 36.458vw, 100%); 
		margin: 5px 40px 20px -20px;
	}
	

	/* make lines break at determined points by putting text in spans that break outside the span - but you need to put them each on their own line */
.stick-together span {
	display: inline-block;
}

.alert {
	color: red;
	border: 3px solid red;
}
	
.AL-left {
	justify-content: center;
	align-items: center;
}
.AL-right {
	height: 100%;
	padding-left: 3.906vw;
	align-content: center;
	border: 0px solid lime;
}
	

	
.flexbox-container-stack.arch-ch1.AL-left {
	padding-right: 3.906vw;
	border: 0px solid green;
}
	
.miniportrait {
	width: 10.417vw;
	max-width: 200px;
	min-width: 100px;
}
	
	
	
	
	
	
	
	
	
	




	/* low-alpha pale bg highlight */
.paleBG {
		background-color: rgba(255, 255, 255, 30%);
		margin: 10px 5px;
		display: block;
		padding: 1em;
		background-clip: border-box;
	}

ul.paleBG {
		padding: 1em 1em 1.5em 2em;
	}



	.paleBGcenter {
		background-color: rgba(255, 255, 255, 30%);
		padding: 0.25em;
		display: block;
		text-align: center;
	}


	.paleBGarch {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: auto;
 		justify-content: center;
		margin: 1em auto 0.833vw auto;
		width: 100%;
		max-width: 100%;
		border: 0px solid yellow;
		background-color: rgba(255, 255, 255, 30%);
		padding: 1.302vw;
	}
	

		
		
 	.archPaleBG {
background-color: rgba(255, 255, 255, 30%);
padding: 25px;
margin: 20px 0 px;
	}

	ul, ol {
		padding-left: 1em;
		margin-left: 0;
		display: block;
		overflow: visible;
	  }
	ul ul, ol ol, ol ul, ul ol {
		padding-left: 0.5em;
		display: block;
		overflow: visible;
	  }
	ul ul, ol ul {
		list-style: circle outside;
	  }
	ol ol, ul ol {
		list-style: decimal outside;
	  }
	  
	 ul {
			list-style: disc outside;
	 }
	 
	 ol {
			list-style: decimal outside;
	 }



	/* code to keep bulleted lists with text on the right from overlapping each other */

#contentWrap {
    float: left;
    width: 100%;
    overflow:hidden;
}
#content p {
    margin:5px 20px 1em 10px;
	color: #663300;
}
#content p.pic-wrap {
    float:left;
    margin:12px 24px 1em 0;/*24px rt margin (bullets slide under appx 14px)*/
}
#content p.pic-wrap img {
    display:block;
    border:0px solid #663300;
    padding:0px;
}

#content p.pic-wrap div {
    display:block;
    border:4px solid #663300;
	margin:5px 12px 1em 0px;
    padding:0px;
}

#content ul {
    margin:0;
    padding:0 0 0 50px;/*places bullets appx. 10px from image*/
}
#content li {
    color:#663300;
}



button {
    /* Remove default button styles */
    all: unset;
    cursor: pointer; /* Hand pointer on hover */

    /* Ensure the button is still clickable */
    display: inline-block;

    /* Optional: Add padding or adjust positioning */
    padding: 0;
    margin: 0;
}

button img {
    /* Ensure the image is visible and responsive */
    display: block;
    max-width: 100%; /* Maintain responsiveness if needed */
    height: auto;
    
    /* Optional: Add hover effects */
    transition: opacity 0.3s ease;
}

button:hover img {
    opacity: 0.8; /* Slight fade effect on hover */
}

	.bombparrot {
		display: flex;
		float: right;
		margin-left: 1.302vw;
	}

	.bombparrot img {
		max-width: 100%;
		display: block;
		width: clamp(200px, 15.625vw, 300px);
		margin: 1.302vw auto;
	}

/* to keep the ol from stretching across the screen when beside a float, smh. If using the overflow hidden doesn't work, try clearing floats. If you want lists to wrap around floated imgs, they won't. (: end the list, then restart it under the floated img. */
.wrapper {
	background-clip: border-box;
	overflow: hidden;
	padding-left: 1em;
	border: 0px solid red;
}


.pullup {
	margin: -2em;
}

	#weekdays td {
		border-bottom:  2px solid #663300;
		vertical-align: top;
	}

.sepia {
		filter: sepia(100%);
}


.sidelined {
	display: flex;
  position: relative;
  container-name: cast-MIA;
  container-type: inline-size;
	filter: sepia(100%);
}



/* make sure the z-index of castgallery is below the before and after, and position is relative, not static */

.sidelined::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 35%;
  background: 
	radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 30%,   
    rgba(0, 0, 0, 0.9) 50%,   
    rgba(0, 0, 0, 0.5) 70%,   
    rgba(0, 0, 0, 0) 80%
  );
	border-radius: 5em;
  z-index: 15;
}

.sidelined::after {
		content: "SIDELINED\A(RL)";
		text-align: center;
		  white-space: pre;       /* allows \A to create a real line break */
		  color: black;
		text-shadow: 
			0px 0px 4px rgba(89, 51, 6, 1), /* darker brown */
			0px 0px 2px rgba(89, 51, 6, 1), 
			0 0 2px rgba(255, 255, 0, 0.8),	/* bright yellow */
			0 0 10px rgba(255, 198, 31, 0.4),	/* dk yellow */
			0 0 10px rgba(255, 198, 31, 0.4),
			0 0 15px rgba(255, 198, 31, 0.5);
		-webkit-text-stroke: 0.3px white;
		font-weight: bold;
		font-size: clamp(1em, 10cqw, 1.8em);
		position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		z-index: 16;
  }


.fontsUsed {
	max-width: fit-content;
	margin: 0em auto;
}













































@media (max-width: 1450px) {
	.body-bg {
		background-attachment: fixed;
	}


	.nav, .navB {
		align-content: center;
	}
	

	
	
		/* content layout flexbox 2, this allows each div item to appear in a row */
	.flexbox-container-row:not(.exclude-style) {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		padding: 0px;
		margin: auto;
	}



	/* remove space between menu items at the breakpoint of the row */
#weblog .menucol.first ol {
		margin-bottom: calc(0.2em);
	}
#weblog .menucol.second ol {
		margin-top: calc(-0.5vw);
	}	


#weblog .arch-ch1 h1:first-of-type {
	margin: 2.604vw 0px 0px 0px;
}

#weblog .arch-ch1 h1:nth-of-type(2) {
	margin: -2.604vw 0px 0px 0px;
}




#cast .biopic {
	width: clamp(200px, 24.138dvw, 350px);
}

.caststats {
	width: 60%;
}
.caststats:last-of-type {
	max-width: fit-content;
	margin-right: 0em;
}



}
/* end 1450px query */




































@media (max-width: 1150px) {
	
	.body-bg {
		background-attachment: scroll;
	}

	
	.navImg img {
		width: clamp(calc(88.57vw / 3), 13.021vw, 13.021vw);
		max-width: 250px;
	}

	.navImg.fend {
		margin: 0px;
		display: flex;
		justify-content: flex-end;
	}

	.navImg.fstart {
		margin: 0px;
		display: flex;
		justify-content: flex-start;
	}



	.td1 {
			width: 100px;
			padding: 15px 5px 5px 5px;
		}


	.td2 {
		width: auto;
		padding: 15px 5px;
	}

	h1 {
	 text-align: center;
	 font-size: clamp(1.8em, 2.813vw, 3em);
	}


    h2 {
		text-align: center;
        }
	
	.bombparrot {
		max-width: 100%;
		height: auto;
		display: block;
		width: clamp(200px, 100%, 400px);
		float: right;
		margin-left: 0px;
		box-sizing: border-box;
		margin-bottom: 1em;
	}


	.bombparrot img {
		max-width: 100%;
		display: block;
		width: clamp(200px, 15.625vw, 400px);
	}
	
	
	.menu {
		flex-direction: column;
		justify-content: center;
	}


	.menucol {
		padding: 0px 0em;
		width: 100%;
	}


	.intropage-marginL,  .intropage-marginR {
		padding: 0px 2.604vw;
	}

	.intropage-marginL  {
		padding: 0px 5% 5.208vw 5%;
	}
		
	#cast .caststats {
			float: none;
			background-color: rgba(255, 255, 255, 25%);
			width: 100%;
			max-width: 100%;
			margin: 15px auto;
			padding: 1em;
		}
	
	.HPs, .items, .achieve {
		width: 100%;
		justify-content: center;
		margin: 5px 0px;
	}
		
	p {
		text-indent: 1.5em;
	}

  
	  #rules ul li, #rules ol li {
		overflow: visible;
	  }
	  
	 #weblog ol {
		 margin-left: 1em;
	 }
  
  
  
  
	  .li-pad, .li-pad2 {
		  padding: 5px;
		  margin-left: 0.5em;
		  h3 {
			  margin: 20px auto 10px auto;
		  }
	  }
  
	div.li-pad > div:nth-child(odd),  div.li-pad2 > div:nth-child(even) {
		background-color: rgba(255,255,255, 0.3);
		background-clip: padding-box;
		padding: 1em;
	}

	.paleBG {
		padding: 5px;
	}
	.pad {
		padding: 15px;
	}

	.pullup {
		margin: 0em;
	}
		
	.textAlignBottomDiv {
		flex-direction: column;
		gap: 1.5em;
		margin: 0px auto;
	}


	.setting-45 {
		min-width: 90%;
	}

	.smScr-shift {
		transform: translateX(clamp(-15px, -20px, -25px));
	}

	#content ul {
		padding: 0px;
	}	
		
	#content li {
		margin: clamp(5px, 0.365vw, 0.521vw);
	}

	#content p {
		margin: 7px 1.042vw 0.833vw 0.521vw;
	}

	#content p.pic-wrap {
		float: none;
		margin: 12px auto;
	}





	#cast .biopic {
			float: none;
			width: clamp(200px, 50dvw, 500px);
			max-width: 500px;
			margin: 1.042vw auto;
		}

	#cast .biopic:not(:first-of-type) {
			float: left;
			max-width: 300px;
			margin: 1em 2em;
		}


		.NPCgallery {
			float: none;
			width: clamp(200px, 15.625vw, 350px);
			margin: 15px auto;
			padding: 0px;
		}

		.NPCgalleryExtras {
			float: none;
			width: clamp(200px, 10.417vw, 200px);
			margin: 15px auto;
			padding: 0px;
		}


		.NPCExtrasContainer {
			float: none;
			max-width: 100%;
			object-fit: contain;
			margin: 1.302vw 1.302vw 1.302vw 1.302vw;
			padding: 1.302vw;	
			border: 0px solid pink;	
			b {
				margin: 1.302vw 0px 0px 0.521vw;	
			}
		}





	.fakerow {
		align-content: center;
		border: 0px solid lime;
	}





	#cast .textAlignTop {
		h2 {
			margin-top: 1.5em;
		}
	}

	#cast .textAlignBottomDiv {
		gap: 0em;
	}
		




	.minitext {
		font-size: 0.8em;
	}

	.bigHeader h1 {
		margin: 10px 1.563vw 1.823vw 0.781vw;
		padding: 0.781vw 2.604vw 5px 2.604vw;
		text-align: center;
		font-size: clamp(2em, 4.583vw, 5.5em);
	}






	.LFloatedImg, .RFloatedImg {
		float: none;
		min-width: 150px;
		padding: 5px;
		align-items: center;
		margin: 1em auto;
	}
	
	
	
	
	
	
	
	
	

	.LFloatedHighlight, .RFloatedHighlight {
		clear: none;
		float: none;
		width: clamp(26.042vw, 156.25vw, 500px);
		max-width: 95%;
		padding: 1.302vw;
		margin: 1.042vw auto;
		align-self: center;
		border: 0px solid lime;
	}



	
	
	
	.tableAlternatingCol {
		display: flex;
		flex-direction: column;
	}
	
	
	
	
	
	
	
	.smScr-shift {
		transform: translateX(clamp(-15px, -20px, -25px));
	}

	#content ul {
		padding: 0px;
	}	
		
	#content li {
		margin: clamp(5px, 0.365vw, 0.521vw);
	}

	#content p {
		margin: 7px 1.042vw 0.833vw 0.521vw;
	}
	
	
	
		

	


	#rules ol {
		margin-inline-start: 0;
		padding-inline-start: 20px;
	}

	#abilities {
		margin: 5px 0px 1.042vw 0px;
	}



	.arch-ch1 {
			justify-content: center;
			h1 {
				font-weight: 100;
				font-size: clamp(2.6em, 7vw, 7vw);
				margin-top: -0.013vw;
			}
			h2 {
				font-weight: 100;
				font-size: clamp(2em, 4vw, 4vw);
			}
		}




	.archives {
		width: 90%;
	}


	.td2 img {
		justify-content: end;
	}




	#setting .monthborder {
		justify-content: center;
	}

	/* targets ONLY imgs that are on mobile AND have a tabindex that's 0. ie. only the ones that should be enlarged on click */
	img[tabindex="0"] {
	  transition: transform 0.3s ease, box-shadow 0.3s ease;
	  cursor: zoom-in; /* hint it can be clicked */
	}

	/* On tap/focus/active - enlarge */
	img[tabindex="0"]:focus,
	img[tabindex="0"]:active {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  max-width: 90vw;
	  max-height: 90vh;
	  max-width: 90dvw;
	  max-height: 90dvh;
	  transform: translate(-50%, -50%);
	  z-index: 9999;
	  box-shadow: 0 0 20px rgba(0,0,0,0.8);
		cursor: url('../rotrdk images/buts/cursor-text.svg') 64 64, auto;
	  outline: none;
	  background: black;
	}

		.alignTable {
		padding: 0px;
		td {
			text-align: center;
			font-family: 'Trajan Pro';
			font-size: clamp(1em, 1.823vw, 35px);
			padding: 2px;	
		}
	}



	.tdShort {
		width: 100%;
		height: auto;
		padding: 25px;
		font-size: 1.5em;
		font-weight: bold;
		vertical-align: top;
		margin: auto auto;
		padding: 25px 0px 25px 0px;
		text-align: center;
	}

	.tdLong {
		width: auto;
		vertical-align: top;
		padding: 0px 25px 25px 25px;
	}

	#cast .gap.center {
		flex-wrap: wrap;
	}


	ul, ol {
		padding-left: 0.8em; /* controls the marker + text block indent */
		padding-right: 0em;
		margin: 0px;
		display: block;
		overflow: visible;
	  }
	ul ul, ol ol, ol ul, ul ol {
		padding-left: 0.5em;
		display: block;
		overflow: visible;
	  }
	ul ul, ol ul {
		list-style: circle outside;
	  }
	ol ol, ul ol {
		list-style: decimal outside;
	  }

	ul ul ul, ol ul ul {
		list-style: square outside;
		padding-left: 0.5em;
	  }


	li {
	  text-indent: -0em; /* pulls the text closer to the marker */
	}




	  #rules ul li, #rules ol li {
		overflow: visible;
	  }

	#rules	.tdShort {
			display: flex;
			width: 100%;
			padding: clamp(10px, 1.042vw, 20px);
			padding-bottom: 0px;
			font-size: 1.8em;
			justify-content: center;
			height: auto;
		}

	#rules	.tdLong {
			padding: 1.406vw 2.604vw 1.406vw 1.563vw;
		}
			.alignTable {
			padding: 0px 10.417vw 0px 0px;
			margin: 1em auto;
		}

	.alignTable td {
		text-align: center;
		font-size: clamp(1em, 5dvw, 1.5em);
		padding: 2px;	
	}
	


	#rules ol {
		margin-inline-start: 0;
		padding-inline-start: 20px;
	}

.flexbox-container-stack.arch-ch1.AL-left {
	padding: 0em 3.906vw;
}

	.bg-deco {
		padding-bottom: 50px;
	}

	.smscr-shift {
		display: flex;
		flex-direction: row;
	}
	.miniportrait {
		max-width: 250px;
		width: 100%;
	}

   .BQ {
		margin: 0.5em;
	}


	#weblog .menucol .arch-ch1 h2 {
			font-weight: 100;
			font-size: clamp(2.5em, 6.261vw, 4em);
			margin-top: 0em;
			margin-bottom: 0em;
			line-height: 0.7;
		}

	#weblog .menucol .arch-ch2 h2 {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		line-height: 1;
		font-size: clamp(2.5em, 6.261vw, 4em);
	}


	.castgallery {
		width: calc(88.385vw / 4.5); /* calc for number of PCs on one line +0.5 */
		height: calc((88.385vw / 4.5) * 1.25);
		max-width: 250px;	
		max-height: 300px;
		min-width: 200px;
		min-height: 250px;
	}











}
/* end 1150px media query */



















@media (max-width: 850px) {


#cast .biopic:not(:first-of-type) {
		float: none;
		max-width: 300px;
		margin: 1em auto;
	}


	.castgallery {
		width: calc(88.385vw / 2.5); /* calc for number of PCs on one line +0.5 */
		height: calc((88.385vw / 2.5) * 1.25);
		max-width: 250px;	
		max-height: 300px;	
	}


}
/* end 850px media query */





























@media (max-width: 600px) {


/* to size the header for each page */
	img.splashHeader {
		margin: 0.741em auto 0.5px auto;
		width: clamp(5.208vw, 62.5dvw, 160px);
	}


	img.sihedronL, img.sihedronR {
		width: clamp(10px, 25vw, 60px);
	}


	.LFloatedHighlight, .RFloatedHighlight {
		max-width: 100%;
	}



	:nth-child(2n+1 of div.fakerow) {
		background-color: transparent;
		}

	div.fakerow:nth-child(2), 
	div.fakerow:nth-child(3),
	div.fakerow:nth-child(6), 
	div.fakerow:nth-child(7),
	div.fakerow:nth-child(10), 
	div.fakerow:nth-child(11) {
		background-color: rgba(255, 255, 255, 0.3);
	}




	.bar {
        max-width: 100%;
		min-height: 50px;
		max-height: 100px;
		width: 100%;
		height: clamp(50px, 4.167vw, 100px);
	}



	#rules .paleBG {
		padding: 10px 5px;
		margin: 0px;
	}

	.NPCgallery,
	.NPCgalleryExtras {
		width: 100%;
	}


	.faketable {
		width: 100%;
	}

	.faketable .NPCgallery {
		margin-top: 0px;
	}

	.NPCgallery {
		width: 100%;
	}

	.relative-box {
		width: 95%;
	}

	.bigHeader {
		padding: 0px 5px;
	}

	#rules .bio {
		margin-top: 0px;
	}

	.textAlignBottomSpan {
		gap: 1em;
	}

	.miniportrait {
		max-width: 100%;
		width: 100%;
	}






	.bar {
        max-width: 100%;
		min-height: 50px;
		max-height: 100px;
		width: 100%;
		height: clamp(50px, 4.167vw, 100px);
	}




	#setting .monthwidth, #setting .monthborder {
		width: 100%;
		justify-content: center;
		align-self: center;
		border: 0px solid lime;
	}


	#cast .gap.center {
		gap: 5px;
	}

	.caststats {
		float: none;
		margin: 1em 0em;
		padding: 10px;
	}

	#cast .textAlignBottomDiv {
		gap: 0em;
		h3 {
			text-align: center;
		}
	}


	.bigHeader.colorbar {
		width: 100%;
		h2 {
			justify-content: center;
		}
	}

	.tdShort {
		width: 100%;
		height: auto;
		padding: 25px;
		font-size: 1.5em;
		font-weight: bold;
		vertical-align: top;
		margin: auto auto;
		padding: 25px 0px 25px 0px;
		text-align: center;
	}

	.tdLong {
		width: auto;
		vertical-align: top;
		padding: 0px;
	}




	#content h1, #content h2 {
		margin-bottom: 1rem;
	}
			
	#content li {
		margin: 0;
	}
	#content ul, #content ol {
		margin:0;
		padding: 0 0 0 0.5rem;
	}
	h1, h2, h3 {
		text-align: center;
		justify-content: center;
	}

	ul, ol {
		padding: unset;
		padding-left: 1.5em; /* controls the marker + text block indent */
		padding-right: 0em;
		margin: 0px;
		display: block;
		overflow: visible;
	  }
	ul ul, ol ol, ol ul, ul ol {
		padding-left: 0.5em;
		display: block;
		overflow: visible;
	  }
	ul ul, ol ul {
		list-style: circle outside;
	  }
	ol ol, ul ol {
		list-style: decimal outside;
	  }

	ul ul ul, ol ul ul {
		list-style: square outside;
		padding-left: 0.5em;
	  }


	li {
	  text-indent: -0em; /* pulls the text closer to the marker */
		padding: 10px;
		margin-left: 0;
		text-align: left;
	}

	#rules .li-pad li p:has(.stick-together) {
		margin-left: 0px;
		text-indent: 0em;
	}

	#rules .li-pad li p .stick-together {
		text-align: center;
	}

	#rules .li-pad li b.stick-together span {
	  display: flex;
	  justify-content: center;
	}

	#rules .tdShort {
			width: 100%;
			height: auto;
			padding: 15px;
			font-size: 1.5em;
			font-weight: bold;
			vertical-align: top;
			margin: auto auto;
			text-align: center;
		}

	#rules .tdLong {
			width: 100%;
			vertical-align: top;
			padding: 15px;
			padding-top: 0px;
		}


	.td1 {
			width: clamp(100px, 10vw, 300px);
			padding: 15px 5px 5px 5px;
			font-size: clamp(16px, 5vw, 1.2em);
		}


	.td2 {
		width: auto;
		padding: 15px 10px 15px 7px;
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: break-word;
	}



	.alignTable .LFloatedImg, .alignTable .RFloatedImg {
			display: flex;
			margin: 1em 0px;
			width: 100%;
			min-width: 150px;
			justify-content: center;
			max-width: clamp(150px, 100%, 550px);
		}

	#rules .tdShort {
			max-width: 100%;
			width: auto;
			padding: 0px;
			padding-top: 15px;
			font-size: 1.3em;
			margin: 0px;
		}

	#rules .tdLong {
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: break-word;
			max-width: 100%;
			width: auto;
			padding: 15px 20px;
			margin: 0px;
		}


	#rules .li-pad.flexbox-container-stack {
		max-width: 100%;
		margin: 0px;
		padding: 0px;
		width: auto;
	}

	  #rules .li-pad.flexbox-container-stack .flexbox-container-row {
		padding: 0em;
	  }

	.bombparrot {
		width: 100%;
		max-width: 100%;
	}
	.bombparrot img {
		width: 100%;
		max-width: 100%;
		margin: 0px;
		padding: 1em 0px;
			padding-top: 0em;
	}

	.td1 {
		min-width: 115px;
		font-size: 1rem;
	}


	#cast .biopic,
	#cast .biopic:not(:first-of-type) {
			float: none;
			width: 100%;
			max-width: 100%;
			margin: 1em 0em;
		}


	.liArch {
	  li {
		font-size: 1.1em;
	  }
	}




		
}
/* end max width 600 media query*/
		
		
		




















































@media (max-width: 450px) {

	.castgallery {
		width: calc(88.385vw / 4.5); /* calc for number of PCs on one line +0.5 */
		height: calc((88.385vw / 4.5) * 1.5);
		max-width: 250px;	
		max-height: 300px;
		min-width: 100px;
		min-height: 150px;
	}

}
/* end max width 450 media query*/















.border {
	border: 3px solid lime;
}